<template>
    <a-layout-content style="padding: 0 50px; margin: 50px 0">
        <a-layout style="padding: 24px 0; background: #fff">
            <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
                <!--                渲染数据s              -->
                <p>
                    <a-form layout="inline" :model="param">
                        <a-form-item>
                            <a-button type="primary" @click="handleQuery()">
                                查询
                            </a-button>
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" @click="add()">
                                新增
                            </a-button>
                        </a-form-item>
                    </a-form>
                </p>
                <a-table
                    :columns="columns"
                    :row-key="record => record.id"
                    :data-source="level1"
                    :loading="loading"
                    :pagination="false"
                    >


                    <template v-slot:action="{ text : record }">
                        <a-space size="small">
                            <a-button type="primary" @click="edit(record)">
                                编辑
                            </a-button>
                            <a-popconfirm
                                    title="是否删除?"
                                    ok-text="Yes"
                                    cancel-text="No"
                                    @confirm="Bdelete(record)"
                            >
                                <a-button type="danger" >
                                    删除
                                </a-button>
                            </a-popconfirm>

                        </a-space>
                    </template>
                </a-table>
                <!--                渲染数据e              -->
            </a-layout-content>
        </a-layout>
    </a-layout-content>

    <a-modal title="分类表单"  v-model:visible="modelVisible"
             :confirm-loading="modelLoading"
              @ok="handleModelOk">
           <a-form :model="category"  >
               <a-form-item label="名称">
                   <a-input v-model:value="category.name" />
               </a-form-item>
               <a-form-item label="父分类">
<!--                   <a-input v-model:value="category.parenet" />-->

                   <a-select
                           v-model:value="category.parenet"
                           ref="select">
                       <a-select-option  :hidden="level1.length>0">
                           无
                       </a-select-option>
                       <a-select-option v-for="c in level1" :key="c.id"  :value="c.id" :disabled="c.id===category.id">
                           {{c.name}}
                       </a-select-option>

                   </a-select>

               </a-form-item>
               <a-form-item label="排序">
                   <a-input v-model:value="category.sort" />
               </a-form-item>
           </a-form>
    </a-modal>
</template>
<script lang="ts">

    import {defineComponent, onMounted, ref} from 'vue';
    import axios from 'axios';
    import  { message } from  'ant-design-vue';
    import {Tool} from "@/util/tool";

    export default defineComponent({
        name: 'AdminCategory',
        setup() { //入口
            console.log("setup");
            const param = ref();
            param.value = {};  //存储请求时要 过滤参数数据
            const categorys = ref();//声明动态数据
            const level1 = ref();
            const columns = [
                {
                    title: '名称',
                    dataIndex: 'name'
                },
                {
                    title: '父分类',
                    dataIndex:'parenet'
                },
                {
                    title: '排序',
                    dataIndex:'sort'
                },
                {
                    title: '操作',
                    key: 'action',//没有的数据加key
                    slots: { customRender: 'action' }
                }
            ]; //对应列

            const loading = ref(false); //页面加载

            //表单
            const category=ref();
            const modelLoading = ref<boolean>(false);
            const modelVisible = ref<boolean>(false);

            const handleModelOk = () => {
                modelLoading.value = true;
                axios.post("/category/save", category.value).then((response) => {

                    const data = response.data;
                    if (data.success){

                        modelLoading.value = false;
                        modelVisible.value = false;

                        handleQuery();
                    }else{
                        modelLoading.value = false;
                        message.error(data.message)
                    }
                });
            };
            const edit = (record :any) => {
                modelVisible.value = true;
                category.value =Tool.copy(record);
            };

            const add = () => {
                modelVisible.value = true;
                category.value ={};
            };

            const Bdelete = (record :any) => {
                axios.delete("/category/delete/"+record.id).then((response) => {
                    const data = response.data;
                    if (data.success){
                        handleQuery();
                    }
                });
            };

            /**
             * 数据查询
             **/
            const handleQuery = () => {
                loading.value = true;
                axios.get("/category/all").then((response) => {
                    loading.value = false;
                    const data = response.data;
                    if (data.success){
                        categorys.value = data.content; //
                        console.log(categorys.value)
                        level1.value=[];
                        level1.value=Tool.array2Tree(categorys.value,0)
                        console.log(level1)

                    }else{
                       message.error(data.message);
                    }
                });
            };

            onMounted(() => {
                handleQuery();
            });

            return {
                columns,
                categorys,
                loading,
                modelLoading,
                modelVisible,
                edit,
                Bdelete,
                add,
                handleModelOk,
                category,
                handleQuery,
                param,
                level1
            };
        },
    });
</script>
